<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片淡入淡出</title>
	<style type="text/css">
		div{
			width: 250px;
			height:250px;
			background-color: red;
			margin: 10px;
			float: left;
			opacity: 0.3;
      filter:alpha(opacity:30);
      border: 1px solid #000;
		  }	

		div img{
			display: block;
			width: 100%;
			height: 100%;
		}

	</style>
	<script type="text/javascript">
      function getStyle(obj,name){
         if (obj.currentStyle) {
          return obj.currentStyle[name];
         }else{
          return getComputedStyle(obj,true)[name];
         }
       }

       window.onload=function(){
       	   var aDiv = document.getElementsByTagName('div');
           for(var i=0;i<aDiv.length;i++){
              //所有的多物体运动、所有东西都不能存在共用的情况
              aDiv[i].alpha=30;	//设置一个淡入淡出的变量

           	  aDiv[i].onmouseover=function(){
           	  	startMove(this,'opacity',100);
           	  };

        	    aDiv[i].onmouseout=function(){
           	  	startMove(this,'opacity',30);
           	  };
           };
       };

		 //var alpha=30; //设置一个淡入淡出的变量

         function startMove(obj,attr,iTarget){
            //关闭自身物体的定时器
            clearInterval(obj.timer);
            //开启当前点中物体的定时器
            obj.timer=setInterval(function(){
                   //定义变量，计算一下速度
                   //让目标减去这个alpha的值
                   //除6让运动缓冲
                   var cur;
                   if (attr=='opacity') {
                      //Math.round
                      //这里需要用一个四舍五入的方法、去除小数点
                      //计算机有些计算是有BUG问题的
                      //比如alert(0.07*100);
                      var cur=Math.round(parseFloat(getStyle(obj,attr))*100); 

                   }else{
                       var cur=parseInt(getStyle(obj,attr)); 
                   }


                   var speed = (iTarget-cur)/6;
                   spped=speed>0?Math.ceil(speed):Math.floor(speed);
                   
                   if (cur == iTarget) {
                   	 clearInterval(obj.timer);
                   }else{

                     if (attr=='opacity') {
                       cur+=speed;
                       obj.style.filter='alpha(opacity:'+cur+')';
                       obj.style.opacity=cur/100;
                     }else{
                       obj.style[attr]=cur+speed+'px';
                     }

                   }
            },30)
         }

	</script>
</head>
<body>
	<div><img src="images/avatar_1.jpg"></div>
	<div><img src="images/avatar_2.jpg"></div>
	<div><img src="images/avatar_3.jpg"></div>
	<div><img src="images/avatar_4.jpg"></div>
</body>
</html>